<template>
  <div>
    <el-form
      :rules="rules"
      v-loading="loading"
      element-loading-text="正在注册..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      ref="RegisterForm"
      :model="RegisterForm"
      class="registerContainer"
    >
      <h3 class="Logintitle">用 户 注 册</h3>
      <el-form-item prop="email">
        <el-input
          type="text"
          v-model="RegisterForm.email"
          auto-complete="false"
          placeholder="请输入邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="RegisterForm.password"
          show-password
          auto-complete="false"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item prop="rePassword">
        <el-input
          type="password"
          v-model="RegisterForm.rePassword"
          show-password
          auto-complete="false"
          placeholder="请输入再次输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item prop="name">
        <el-input
          type="text"
          v-model="RegisterForm.name"
          auto-complete="false"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>

      <el-form-item prop="phone">
        <el-input
          type="text"
          v-model="RegisterForm.phone"
          auto-complete="false"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>

      <el-form-item prop="code">
        <el-row :gutter="20">
          <el-col :span="16"
            ><div class="grid-content bg-purple">
              <el-input
                type="text"
                v-model="RegisterForm.code"
                auto-complete="false"
                placeholder="点击按钮获取验证码"
                style="width: 250px; margin-right: 5px"
              ></el-input></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-button
                type="primary"
                style="width: 103px"
                v-if="isShow"
                @click="getCode"
                >获取验证码</el-button
              >
              <div v-if="!isShow">
                <el-button type="primary" style="width: 103px" disabled
                  ><span>{{ count }}</span> 秒</el-button
                >
              </div>
            </div></el-col
          >
        </el-row>
      </el-form-item>

      <el-button type="primary" @click="Register" style="width: 100%"
        >注册</el-button
      >
      <el-button
        type="primary"
        @click="toLogin"
        style="width: 100%; margin: 15px 0 0 0"
        >返回登录</el-button
      >
    </el-form>
  </div>
</template>

<script>
import Cookie from "js-cookie";
export default {
  name: "Login",
  data() {
    return {
      RegisterForm: {
        email: "",
        password: "",
        rePassword: "",
        code: "",
        name:"",
        phone:''
      },
      isShow: true,
      count: 0,
      msg: "",
      loading: false,
      captchaUrl: "",
      checked: true,
      loginType: "2",
      rules: {
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        rePassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
      },
    };
  },
  beforeCreate() {
      this.countdonw()
  },
  methods: {
    countdonw() {
      if(Cookie.get("registerCount") == 'NaN'){
        Cookie.set("registerIsShow", "true");
      }
      if (!Boolean(Cookie.get("registerIsShow"))) {
        this.isShow = Boolean(Cookie.get("registerIsShow"));
        this.count = parseInt(Cookie.get("registerCount"));
        var times = setInterval(() => {
          this.count--;
          Cookie.set("registerCount", this.count);
          if (this.count <= 0) {
            Cookie.set("registerIsShow", "true");
            this.isShow = true;
            clearInterval(times);
          }
        }, 1000);
      }
    },
    async getCode() {
      if (this.RegisterForm.email == "") {
        this.$message.error("请先填写邮箱");
      } else {
        Cookie.set("registerIsShow", "");
        Cookie.set("registerCount", 10);
        this.countdonw()
        this.axios
          .get("api/sendEmailCode?email=" + this.RegisterForm.email)
          .then((response) => {
              if(response.data.code == '200'){
                  this.$message({
                    message: '验证码已发送到您的邮箱中',
                    type: "success",
                  });
              }else{
                  this.$message.error(response.data.message);
              }
          })
          .catch((error) => {
            this.$message.error("发送失败");
          });
      }
    },
    toLogin() {
      this.$router.push("/");
    },
    Register() {
      this.loading = true;
      this.$refs.RegisterForm.validate((valid) => {
        if (valid) {
            this.axios
              .post(
                "api/cusRegister?email=" +
                  this.RegisterForm.email +
                  "&password=" +
                  this.RegisterForm.password +
                  "&rePassword=" +
                  this.RegisterForm.rePassword +
                  "&name=" +
                  this.RegisterForm.name +
                  "&phone=" +
                  this.RegisterForm.phone +
                  "&code=" +
                  this.RegisterForm.code
              )
              .then((response) => {
                console.log(response);
                if (response.data.code == 200) {
                  this.$message({
                    message: "注册成功",
                    type: "success",
                  });
                  this.$router.push("/");
                } else {
                  this.$message.error(response.data.message);
                }
              })
              .catch((error) => {
                this.$message.error("注册失败");
              });
        } else {
          this.$message.error("请填写全部内容");
          return false;
        }
      });
      this.loading = false;
    },
  },
};
</script>

<style>
.registerContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 80px auto;
  width: 350px;
  padding: 15px 35px;
  background: #ffff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.Logintitle {
  margin: 0px auto 20px auto;
  text-align: center;
}
.LoginRemenber {
  text-align: left;
  margin: 0 0 15px 0;
}
</style>
